<template>
  <div class="frame">
    <div v-if="nowSelect === 1">
      <div class="home_goodtype">
        <div>
          <img style="margin:0 auto" src="@/assets/img/classHead.png" alt />
          <div>
            <ul>
              <li
                v-for="(item, index) in typeList"
                :key="index"
                @click="changeType(index, item)"
                :class="index === typeSelect ? 'hasSelects' : ''"
              >
                {{ item.name }}
              </li>
              <li>板肖、主肖、注销修理包系列</li>
            </ul>
          </div>
          <img src="@/assets/img/classbj.jpg" width="240px" alt />
        </div>
        <div>
          <div>
            <img src="@/assets/img/home_titlebj.png" width="890px" alt />
            <span class="title_text">汽车个地盘螺母</span>
            <div class="good_container">
              <div @click="goodDetail()" class="good_item">
                <img src="@/assets/img/product_middle.jpg" alt />
                <p>螺母13</p>
              </div>
              <div class="good_item">
                <img src="@/assets/img/product_middle.jpg" alt />
                <p>螺母13</p>
              </div>
              <div class="good_item">
                <img src="@/assets/img/product_middle.jpg" alt />
                <p>螺母13</p>
              </div>
              <div class="good_item">
                <img src="@/assets/img/product_middle.jpg" alt />
                <p>螺母13</p>
              </div>
              <div class="good_item">
                <img src="@/assets/img/product_middle.jpg" alt />
                <p>螺母13</p>
              </div>
            </div>
          </div>
          <div>
            <img src="@/assets/img/home_titlebj.png" width="890px" alt />
            <span class="title_text">汽车个地盘螺母</span>
            <div class="good_container">
              <div class="good_item">
                <img src="@/assets/img/product_middle.jpg" alt />
                <p>螺母13</p>
              </div>
              <div class="good_item">
                <img src="@/assets/img/product_middle.jpg" alt />
                <p>螺母13</p>
              </div>
              <div class="good_item">
                <img src="@/assets/img/product_middle.jpg" alt />
                <p>螺母13</p>
              </div>
              <div class="good_item">
                <img src="@/assets/img/product_middle.jpg" alt />
                <p>螺母13</p>
              </div>
              <div class="good_item">
                <img src="@/assets/img/product_middle.jpg" alt />
                <p>螺母13</p>
              </div>
              <!-- <div class="good_item">
              <img src="@/assets/img/product_middle.jpg" alt />
              <p>螺母13</p>
            </div>-->
            </div>
          </div>
        </div>
      </div>
    </div>
    <div v-if="nowSelect === 2">
      <div class="goodtype">
        <div>
          <img style="margin:0 auto" src="@/assets/img/classHead.png" alt />
          <div>
            <ul>
              <li
                v-for="(item, index) in typeList"
                :key="index"
                @click="changeType(index, item)"
                :class="index === typeSelect ? 'hasSelects' : ''"
              >
                {{ item.name }}
              </li>
              <li>板肖、主肖、注销修理包系列</li>
            </ul>
          </div>
          <img src="@/assets/img/classbj.jpg" width="240px" alt />
        </div>
        <div>
          <img src="@/assets/img/home_titlebj.png" width="890px" alt />
          <span class="title_text">关于凯盈</span>
          <div class="infotext">
            <h3 class="aboutus_title">凯盈简介</h3>
            <h3 class="aboutus_title">
              Lorem ipsum dolor sit amet consectetur adipisicing elit. Deleniti,
              asperiores.
            </h3>
            <p class="aboutus_text">
              Lorem ipsum dolor sit amet consectetur adipisicing elit.
              Laboriosam, aliquid, omnis necessitatibus exercitationem
              dignissimos amet adipisci distinctio dolor ut nemo, quasi
              repellendus earum? Est odio atque error sed nisi quo eligendi esse
              veritatis, molestias, delectus, temporibus corrupti. Non sapiente
              aspernatur explicabo veniam deserunt exercitationem veritatis,
              fugit, doloremque, velit quae quasi.
              <!-- <img src="@/assets/img/1.jpg" width="50px" alt="" /> -->
            </p>
            <p class="aboutus_text">
              Lorem ipsum dolor sit amet consectetur adipisicing elit. Cum
              accusantium eum, quidem sapiente fuga est expedita temporibus
              eveniet maiores quam, provident id! Blanditiis incidunt, eos
              voluptas optio ut praesentium, ipsum reiciendis similique labore,
              reprehenderit tempore placeat consequatur eius soluta! Delectus
              voluptas et alias, explicabo optio vero pariatur quas assumenda
              quo eligendi voluptate distinctio voluptatem dolorum error
              nesciunt possimus? Nisi accusamus velit expedita enim voluptatibus
              reprehenderit voluptatem architecto, quam aliquid deserunt eos
              dicta, blanditiis fugit veniam dolore unde eligendi, veritatis
              alias consectetur esse cupiditate voluptas. Eligendi adipisci,
              laboriosam vero enim, vitae quasi libero voluptas voluptates eaque
              esse architecto eos dolor unde!
            </p>
            <p class="aboutus_text">
              Lorem ipsum dolor sit amet consectetur adipisicing elit. Cumque
              nulla iste amet totam nam incidunt. Aperiam vero, unde, est
              blanditiis suscipit architecto sed cumque sit asperiores facere,
              reprehenderit odit voluptas aliquam reiciendis. Pariatur mollitia
              nulla sapiente eius sunt praesentium maiores recusandae fugit,
              delectus, suscipit explicabo soluta nemo cum excepturi quod non
              facilis, culpa fugiat omnis at cupiditate aspernatur doloremque?
              Aut ducimus possimus, eaque quos qui porro a dicta nemo odit vitae
              laborum debitis, beatae deleniti nisi iste optio quas veniam.
            </p>
          </div>
          <!-- <div v-else class="goodinfo">
          <div></div>
        </div>-->
        </div>
      </div>
    </div>
    <div v-if="nowSelect === 3">
      <div class="type_goodtype">
        <div>
          <img style="margin:0 auto" src="@/assets/img/classHead.png" alt />
          <div>
            <ul>
              <li
                v-for="(item, index) in typeList"
                :key="index"
                @click="changeType(index, item)"
                :class="index === typeSelect ? 'hasSelects' : ''"
              >
                {{ item.name }}
              </li>
              <!-- <li>板肖、主肖、注销修理包系列</li> -->
            </ul>
          </div>
          <img src="@/assets/img/classbj.jpg" width="240px" alt />
        </div>
        <div>
          <div>
            <img src="@/assets/img/home_titlebj.png" width="890px" alt />
            <span class="title_text">产品展示</span>
            <div class="good_container">
              <div
                v-for="(item, index) in dataList.data"
                :key="index"
                v-show="dataList.data.length !== 0"
                class="good_item"
              >
                <!-- {{ item }} -->
                <img :src="item.img" alt />
                <p>{{ item.name }}</p>
              </div>
              <div v-show="dataList.data.length === 0">
                <p>没有相关内容</p>
              </div>
              <div :style="flexShow"></div>
              <!-- <div class="good_item">
                <img src="@/assets/img/product_middle.jpg" alt />
                <p>螺母13</p>
              </div>
              <div class="good_item">
                <img src="@/assets/img/product_middle.jpg" alt />
                <p>螺母13</p>
              </div>
              <div class="good_item">
                <img src="@/assets/img/product_middle.jpg" alt />
                <p>螺母13</p>
              </div>
              <div class="good_item">
                <img src="@/assets/img/product_middle.jpg" alt />
                <p>螺母13</p>
              </div> -->
              <!-- <div class="good_item">
              <img src="@/assets/img/product_middle.jpg" alt />
              <p>螺母13</p>
            </div>-->
            </div>
          </div>
        </div>
      </div>
    </div>
    <div v-if="nowSelect === 4">
      <div class="goodtype">
        <div>
          <img style="margin:0 auto" src="@/assets/img/classHead.png" alt />
          <div>
            <ul>
              <li
                v-for="(item, index) in typeList"
                :key="index"
                @click="changeType(index, item)"
                :class="index === typeSelect ? 'hasSelects' : ''"
              >
                {{ item.typename }}
              </li>
              <!-- <li>板肖、主肖、注销修理包系列</li> -->
            </ul>
          </div>
          <img src="@/assets/img/classbj.jpg" width="240px" alt />
        </div>
        <div>
          <img src="@/assets/img/home_titlebj.png" width="890px" alt />
          <span class="title_text">新闻资讯</span>
          <div class="infotext">
            <ul>
              <li v-for="(item, index) in dataList.data" :key="index">
                <h3>{{ item.title }}</h3>
                <p>{{ item.time }}</p>
                <p>
                  {{ item.content }}
                </p>
              </li>
              <li>
                <h3>如何提高汽车底盘凸焊质量</h3>
                <p>2015-12-15</p>
                <p>
                  Lorem ipsum dolor sit amet consectetur adipisicing elit. Eum
                  earum aliquam at, et alias dolorum? Dolorem omnis iusto harum,
                  natus nihil iste sunt accusamus quia eligendi molestias.
                  Adipisci, reiciendis ab.
                </p>
              </li>
              <li>
                <h3>如何提高汽车底盘凸焊质量</h3>
                <p>2015-12-15</p>
                <p>
                  Lorem ipsum dolor sit amet consectetur adipisicing elit. Eum
                  earum aliquam at, et alias dolorum? Dolorem omnis iusto harum,
                  natus nihil iste sunt accusamus quia eligendi molestias.
                  Adipisci, reiciendis ab.
                </p>
              </li>
              <li>
                <h3>如何提高汽车底盘凸焊质量</h3>
                <p>2015-12-15</p>
                <p>
                  Lorem ipsum dolor sit amet consectetur adipisicing elit. Eum
                  earum aliquam at, et alias dolorum? Dolorem omnis iusto harum,
                  natus nihil iste sunt accusamus quia eligendi molestias.
                  Adipisci, reiciendis ab.
                </p>
              </li>
              <li>
                <h3>如何提高汽车底盘凸焊质量</h3>
                <p>2015-12-15</p>
                <p>
                  Lorem ipsum dolor sit amet consectetur adipisicing elit. Eum
                  earum aliquam at, et alias dolorum? Dolorem omnis iusto harum,
                  natus nihil iste sunt accusamus quia eligendi molestias.
                  Adipisci, reiciendis ab.
                </p>
              </li>
            </ul>
          </div>
          <!-- <div v-else class="goodinfo">
          <div></div>
        </div>-->
        </div>
      </div>
    </div>
    <div v-if="nowSelect === 5">
      <div class="goodtype">
        <div>
          <img style="margin:0 auto" src="@/assets/img/classHead.png" alt />
          <div>
            <ul>
              <li
                v-for="(item, index) in typeList"
                :key="index"
                @click="changeType(index, item)"
                :class="index === typeSelect ? 'hasSelects' : ''"
              >
                {{ item.name }}
              </li>
              <li>板肖、主肖、注销修理包系列</li>
            </ul>
          </div>
          <img src="@/assets/img/classbj.jpg" width="240px" alt />
        </div>
        <div>
          <img src="@/assets/img/home_titlebj.png" width="890px" alt />
          <span class="title_text">联系我们</span>
          <div class="contarct_us">
            <div class="maps"></div>
            <div class="contractus">
              <h1>Contact Us</h1>
              <ul>
                <li>地址：{{ dataList[0].address }}.</li>
                <li>联系电话：{{ dataList[0].phone }}</li>
                <li>联系人：{{ dataList[0].person }}</li>
                <li>传真：{{ dataList[0].Fax }}</li>
                <li>邮箱：{{ dataList[0].email }}</li>
              </ul>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- 商品详情 -->
    <div v-if="nowSelect === 6">
      <div class="goodinfo">
        <div>
          <img style="margin:0 auto" src="@/assets/img/classHead.png" alt />
          <div>
            <ul>
              <li
                v-for="(item, index) in typeList"
                :key="index"
                @click="changeType(index, item)"
                :class="index === typeSelect ? 'hasSelects' : ''"
              >
                {{ item.name }}
              </li>
              <li>板肖、主肖、注销修理包系列</li>
            </ul>
          </div>
          <img src="@/assets/img/classbj.jpg" width="240px" alt />
        </div>
        <div>
          <img src="@/assets/img/home_titlebj.png" width="890px" alt />
          <span class="title_text">高强度螺母系列</span>
          <div class="contarct_us">
            <div class="good_mainpic">
              <img
                src="@/assets/img/product_middle.jpg"
                width="100%"
                height="100%"
                alt=""
              />
            </div>
            <div class="goodinfo_msg">
              <h1>Contact Us</h1>
              <ul>
                <li>
                  地址：Lorem ipsum dolor sit amet, consectetur adipisicing
                  elit. Assumenda, at.
                </li>
                <li>联系电话：19905076109</li>
                <li>联系人：Jimmy</li>
                <li>传真：1002661758@qq.com</li>
                <li>邮箱：1002661758@qq.com</li>
              </ul>
            </div>
          </div>
          <div>
            <img src="@/assets/img/demo.jpg" width="100%" alt="" />
            <img src="@/assets/img/demo.jpg" width="100%" alt="" />
          </div>
        </div>
      </div>
    </div>
    <div class="page_container">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage4"
        :page-sizes="pageData"
        :page-size="100"
        layout="total, sizes, prev, pager, next, jumper"
        :total="dataList.allnumber"
      >
      </el-pagination>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      nowSelect: null,
      typeList: [],
      typeSelect: 0, //  左侧栏选中的内容
      dataList: [], // 存放渲染数据
      pageData: [8, 12, 16],
      pageMsg: {
        page: 1,
        typeid: null,
        pagesize: 0,
      },

      currentPage4: 1,
    }
  },
  computed: {
    flexShow() {
      let num = this.dataList.data.length % 4
      console.log('xxxx', num)
      let str = `width:${(4 - num) * 214}px`
      console.log('kk', str)
      return str
    },
  },
  // watch: {
  //   nowSelect(newVal, oldVal) {
  //     this.getData(newVal)
  //     // console.log(, this.typeList[this.nowSelect])
  //   },
  // },
  created() {
    this.nowSelect = this.$store.state.selectIndex
    console.log(this.nowSelect)
  },
  mounted() {
    // if (this.nowSelect === 4) {
    //   this.getNewType()
    // } else {
    //   this.getGoodType()
    // }
    this.getType()

    this.pageMsg.pagesize = this.pageData[0]
    console.log('mounted', this.nowSelect)
  },
  methods: {
    // async getType() {
    //   let res = await this.$api.news.getNewType()
    //   if(res.data.code === 200){

    //   }
    //   console.log('newsss', res)
    // },
    async getType() {
      let res = null
      if (this.nowSelect === 4) {
        res = await this.$api.news.getNewType()
      } else {
        res = await this.$api.good.getGoodType()
      }
      if (res.data.code == 200) {
        this.typeList = res.data.result
        this.pageMsg.typeid = this.typeList[this.typeSelect].typeid
        this.getData(this.nowSelect)
      }
      console.log(this.typeList)
    },
    changeType(index, item) {
      this.typeSelect = index
      console.log(this.typeList[index].typeid)
      this.pageMsg.typeid = item.typeid
      this.pageMsg.page = 1
      console.log('xxxaaaaaa', this.nowSelect)
      this.getData(this.nowSelect)
      // this.$router.push('/allgoods')
    },
    async getData(type) {
      console.log('ckijnn', type)
      let res = null
      switch (type) {
        case 1:
          res = await this.$api.good.getOneTypeGood(this.pageMsg)
          if (res.data.code === 200) {
            console.log(res)
            this.dataList = res.data.result
          }
          break
        case 2:
          break
        case 3:
          res = await this.$api.good.getOneTypeGood(this.pageMsg)
          console.log('mmmmc', res)
          if (res.data.code === 200) {
            this.dataList = res.data.result
          }
          break
        case 4:
          res = await this.$api.news.getOneTypeNew(this.pageMsg)
          console.log('ppp', res)
          if (res.data.code === 200) {
            this.dataList = res.data.result
          }
          break
        case 5:
          res = await this.$api.other.contactUs()
          console.log('pppus', res)
          if (res.data.code === 200) {
            this.dataList = res.data.result
          }
          break
      }
    },
    handleSizeChange(val) {
      this.pageMsg.pagesize = val
      this.getData(this.nowSelect)

      // console.log(`每页 ${val} 条`, type)
    },
    handleCurrentChange(val) {
      this.pageMsg.page = val
      this.getData(this.nowSelect)
      console.log(`当前页: ${val}`)
    },
  },
}
</script>

<style lang="less" scoped>
.goodtype {
  width: 1180px;
  // height: 300px;
  // background-color: skyblue;
  margin: 0 auto;
  display: flex;
  padding-bottom: 25px;
  justify-content: space-between;
  > div:nth-child(1) {
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    > div {
      width: 240px;
      padding-top: 10px;
      // height: 60px;
      background-color: rgb(30, 150, 237);
      // padding-right: 10px;
      ul {
        list-style: none;
        li {
          width: 100%;
          text-align: right;
          margin: 10px 0;
          color: #fff;
          color: rgb(245, 237, 249);
          font-size: 17px;
          cursor: pointer;
          padding: 10px 8px;
        }
        .hasSelects {
          background: #fff;

          color: rgb(30, 150, 237);
        }
      }
    }
  }
  > div:nth-child(2) {
    transform: translateY(2px);
    position: relative;
    .title_text {
      position: absolute;
      top: 8px;
      left: 50px;
      color: rgb(101, 101, 101);
      font-size: 17px;
    }
    .infotext {
      width: 890px;
      ul {
        list-style: none;
        li {
          h3,
          p {
            margin: 8px 0;
          }
          p {
            color: rgb(101, 101, 101);
          }
        }
      }
    }
    .aboutus_title {
      text-align: center;
      padding: 8px 0;
      font-size: 19px;
    }
    .aboutus_text {
      text-indent: 2em;
      line-height: 20px;
    }

    .contarct_us {
      width: 100%;
      height: 500px;
      display: flex;
      justify-content: space-between;

      .maps {
        width: 410px;
        height: 410px;
        background-color: skyblue;
      }
      .contractus {
        width: 450px;
        height: 410px;
        // background-color: red;
        h1 {
          padding: 10px 0;
          border-bottom: 1px solid #ccc;
          margin-bottom: 15px;
        }
        ul {
          list-style: none;
          li {
            padding: 10px 0;
          }
        }
      }
    }
  }
}

.home_goodtype {
  width: 1180px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  > div:nth-child(1) {
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    > div {
      width: 240px;
      padding-top: 10px;
      background-color: rgb(30, 150, 237);
      ul {
        list-style: none;
        li {
          width: 100%;
          text-align: right;
          margin: 10px 0;
          color: #fff;
          color: rgb(245, 237, 249);
          font-size: 17px;
          padding: 10px 8px;
        }
        .hasSelects {
          background: #fff;
          // padding: 10px 10px;
          color: rgb(30, 150, 237);
        }
      }
    }
  }
  > div:nth-child(2) {
    transform: translateY(2px);
    position: relative;
    .title_text {
      position: absolute;
      top: 8px;
      left: 30px;
      color: rgb(101, 101, 101);
      font-size: 17px;
    }
    .good_container {
      display: flex;
      width: 890px;
      justify-content: space-between;
      flex-wrap: wrap;
      > .good_item {
        width: 24%;
        margin-bottom: 10px;
        > img {
          width: 215px;
          height: 215px;
        }
        > p {
          text-align: center;
        }
      }
    }
    .infotext {
      width: 890px;
      ul {
        list-style: none;
        li {
          h3,
          p {
            margin: 8px 0;
          }
          p {
            color: rgb(101, 101, 101);
          }
        }
      }
    }
  }
}

.type_goodtype {
  width: 1180px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  > div:nth-child(1) {
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    > div {
      width: 240px;
      padding-top: 10px;
      background-color: rgb(30, 150, 237);
      ul {
        list-style: none;
        li {
          width: 100%;
          text-align: right;
          margin: 10px 0;
          color: #fff;
          color: rgb(245, 237, 249);
          font-size: 17px;
          padding: 10px 8px;
        }
        .hasSelects {
          background: #fff;
          // padding: 10px 10px;
          color: rgb(30, 150, 237);
        }
      }
    }
  }
  > div:nth-child(2) {
    transform: translateY(2px);
    position: relative;
    .title_text {
      position: absolute;
      top: 8px;
      left: 50px;
      color: rgb(101, 101, 101);
      font-size: 17px;
    }
    .good_container {
      display: flex;
      width: 890px;
      justify-content: space-between;
      flex-wrap: wrap;
      > .good_item {
        width: 24%;
        margin-bottom: 10px;
        > img {
          width: 215px;
          height: 215px;
        }
        > p {
          text-align: center;
        }
      }
    }
    .infotext {
      width: 890px;
      ul {
        list-style: none;
        li {
          h3,
          p {
            margin: 8px 0;
          }
          p {
            color: rgb(101, 101, 101);
          }
        }
      }
    }
  }
}

.goodinfo {
  width: 1180px;
  // height: 300px;
  // background-color: skyblue;
  margin: 0 auto;
  display: flex;
  padding-bottom: 25px;
  justify-content: space-between;
  > div:nth-child(1) {
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    > div {
      width: 240px;
      padding-top: 10px;
      // height: 60px;
      background-color: rgb(30, 150, 237);
      // padding-right: 10px;
      ul {
        list-style: none;
        li {
          width: 100%;
          text-align: right;
          margin: 10px 0;
          color: #fff;
          color: rgb(245, 237, 249);
          font-size: 17px;
          cursor: pointer;
          padding: 10px 8px;
        }
        .hasSelects {
          background: #fff;
          // padding: 10px 10px;
          color: rgb(30, 150, 237);
        }
      }
    }
  }
  > div:nth-child(2) {
    transform: translateY(2px);
    position: relative;
    .title_text {
      position: absolute;
      top: 8px;
      left: 50px;
      color: rgb(101, 101, 101);
      font-size: 17px;
    }
    .infotext {
      width: 890px;
      ul {
        list-style: none;
        li {
          h3,
          p {
            margin: 8px 0;
          }
          p {
            color: rgb(101, 101, 101);
          }
        }
      }
    }
    .aboutus_title {
      text-align: center;
      padding: 8px 0;
      font-size: 19px;
    }
    .aboutus_text {
      text-indent: 2em;
      line-height: 20px;
    }

    .contarct_us {
      width: 100%;
      height: 500px;
      display: flex;
      justify-content: space-between;

      .good_mainpic {
        width: 410px;
        height: 410px;
        background-color: skyblue;
      }
      .goodinfo_msg {
        width: 450px;
        height: 410px;
        // background-color: red;
        h1 {
          padding: 10px 0;
          border-bottom: 1px solid #ccc;
          margin-bottom: 15px;
        }
        ul {
          list-style: none;
          li {
            padding: 10px 0;
          }
        }
      }
    }
  }
}

.page_container {
  display: flex;
  justify-content: center;
}
</style>
